<template>
    <div class="refund_detail_main">
        <div class="detail_container_header">
            <el-descriptions :column="3" style="width: 80%">
                <el-descriptions-item label="售后编号：">{{ Data.detailInfo.refundNo }}</el-descriptions-item>
                <el-descriptions-item label="申请时间：">{{ Data.detailInfo.createdAt }}</el-descriptions-item>
                <el-descriptions-item label="退款类型：">
                    {{ transformStream(Data.detailInfo?.refundType, 'REFUND_TYPE_OPTIONS') }}
                </el-descriptions-item>
                <el-descriptions-item label="订单编号：">
                    {{ Data.detailInfo.orderSn }}
                </el-descriptions-item>
                <el-descriptions-item label="订单状态：">
                    {{ translateOrderCode(Data.detailInfo?.orderStatus, Data.detailInfo?.isSelfPickup) }}
                </el-descriptions-item>
                <el-descriptions-item label="申请人：">
                    <span>{{ Data.detailInfo.nickname }}</span>
                    <span v-if="Data.detailInfo.orderMobile">（{{ Data.detailInfo.orderMobile }}）</span>
                </el-descriptions-item>
            </el-descriptions>
            <div class="header_right">
                <div class="header_button" v-if="Data.detailInfo.refundStatusInfo?.refundStatusName">
                    <div class="dot"></div>
                    {{ Data.detailInfo.refundStatusInfo?.refundStatusName }}
                </div>
                <div>{{ Data.detailInfo.refundStatusInfo?.refundSubStatusName }}</div>
            </div>
        </div>
        <div class="detail_container_product">
            <div class="title"><span>退货商品信息</span><el-divider /></div>
            <el-table :span-method="objectSpanMethod" border stripe :data="Data.goods">
                <el-table-column label="商品信息" width="420">
                    <template #default="scope">
                        <div class="goods_item">
                            <img :src="scope.row.goods[0].goodsImg" alt="" />
                            <div class="goods_item_info">
                                <div class="goods_item_name">
                                    {{ scope.row.goods[0].goodsName }}
                                </div>
                                <div class="goods_item_sku">
                                    <span v-for="(el, idx) in scope.row.goods[0].skuExtInfo" :key="idx">
                                        {{ el.keyAttributeName }}:{{ el.attributeValue }}
                                        {{ idx < scope.row.skuExtInfo?.length - 1 ? ';' : '' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="refundGoodsCount" label="退款数量" width="100"> </el-table-column>
                <el-table-column prop="" align="center" label="发货状态" width="190">
                    <template #default="{ row }">
                        <div>{{ row.goods[0].goodsStatusName }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="refundStatusName" label="退回金额">
                    <template #default>
                        <div>
                            退回现金：<span class="num"
                                >￥{{ floatDivide(Data.detailInfo.refundPaymentFee, 100) }}
                            </span>
                            <span class="cell-sub">
                                (含运费￥<span>{{ floatDivide(Data.detailInfo.refundLogisticsFee, 100) }} </span>)
                            </span>
                        </div>
                        <div>
                            退回积分：<span class="num">{{ floatDivide(Data.detailInfo.refundUsePoints, 100) }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="refundStatusName" label="退货物流">
                    <template #default>
                        <div>快递公司：{{ Data.detailInfo.logistics?.logisticsCompany || '-' }}</div>
                        <div>物流单号：{{ Data.detailInfo.logistics?.logisticsNo || '-' }}</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="detail_container_logs">
            <div class="title"><span>售后处理日志</span><el-divider /></div>
            <div class="steps_list">
                <div class="step-item" v-for="(item, index) in Data.logsSteps" :key="index">
                    <div class="step-head">
                        <div class="step-icon"></div>
                        <div class="step-line" v-if="index < Data.logsSteps.length - 1"></div>
                    </div>
                    <div class="step_box">
                        <div class="step-time">
                            {{ item.createdAt }}
                        </div>
                        <div class="step-status">
                            <span v-if="item.buyerUid">【买家】 </span>
                            <span v-if="item.sellerUid">【卖家】 </span>
                            <span>{{ item.action }} </span>
                        </div>
                        <!-- 1 创建售后申请 2 卖家拒绝售后申请 3买家提交售后申请（重新提交材料）4 卖家同意售后申请 5 退货已寄出 6 卖家确认收货并退款 7 售后完成（退款成功） 8 退款失败 9 卖家拒绝收货 10 撤销申请 -->
                        <div v-if="item.status == 1 || item.status == 3">
                            <div class="step_content">&nbsp; 退款理由： {{ item.reason || '-' }}</div>
                            <div class="step_content">&nbsp; 退款说明：{{ item.description || '无' }}</div>
                            <div class="step_list_img" v-if="item.buyerUid">
                                &nbsp; 凭证：<span v-if="item.refundProofList?.length < 1">无</span>
                                <el-image
                                    class="step_img"
                                    v-for="(el, idx) in item.refundProofList"
                                    :key="idx"
                                    :src="el"
                                    :preview-src-list="item.refundProofList"
                                    :initial-index="Data.initialIndex"
                                    @click="refundProofHandler(idx, index)"
                                    fit="cover" />
                            </div>
                        </div>
                        <div v-else-if="item.status == 2 || item.status == 9">
                            <div class="step_content">&nbsp; 拒绝原因： {{ item.reason || '-' }}</div>
                        </div>
                        <div v-else-if="item.status == 5">
                            <div class="step_content">&nbsp; 快递公司： {{ item.logisticsCompany || '-' }}</div>
                            <div class="step_content">&nbsp; 快递单号： {{ item.logisticsNo || '-' }}</div>
                        </div>
                        <div v-else-if="item.status == 12">
                            <div class="step_content">{{ item.description }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { floatDivide, floatMultiply, checkPermission, translateOrderCode } from '@/commons/utils.js';
import request from '@/request';
import storage from '@/commons/storage';
import { setLayout, resetLayout } from '@/hooks/layout';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

const Data = reactive({
    detailInfo: {},
    goods: [],
    logsSteps: [],
    initialIndex: ''
});

/** 商品原价总金额 */
const goodsTotal = computed(() => {
    let total = 0;
    if (Data?.detailInfo?.orderType === 6 && Data.goods[0]?.goodsType === 1) {
        total = Data.goods.reduce((pre, cur) => pre + cur.totalSellPrice, 0);
    } else {
        total = Data.goods.reduce((pre, cur) => pre + cur.total, 0);
    }
    return total;
});
const initDetail = async () => {
    let params = {
        shopId: storage.get('ZW-SHOPID'),
        refundOrderId: route.query.refundOrderId
    };
    let res = await request('getRefundDetailServ', params);
    Data.detailInfo = res.data || {};
    Data.goods = res.data?.refundGoods || [];
};
const initRefundLogs = async () => {
    let params = {
        objectId: route.query.refundOrderId
    };
    let res = await request('getRefundLogsServ', params);
    let list = res.data || [];
    list.map(el => {
        el.refundProofList = [];
        if (el.refundProof) {
            for (let i in el.refundProof) {
                el.refundProofList.push(el.refundProof[i]);
            }
        }
        Data.logsSteps.push(el);
    });
};

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    const num = Data.goods?.length;
    if ([3, 4].includes(columnIndex)) {
        if (rowIndex % num === 0) {
            return {
                rowspan: num,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
};
const refundProofHandler = index => {
    Data.initialIndex = index;
};

onMounted(() => {
    initDetail();
    initRefundLogs();
    setLayout();
});
onUnmounted(() => {
    resetLayout();
});
</script>
<style lang="scss" scoped>
.refund_detail_main {
    :deep(.el-step__description) {
        padding: 0;
    }
    :deep(.el-descriptions__label) {
        color: #969696;
        margin-right: 2px;
    }
    :deep(.el-descriptions__content) {
        color: #33302d;
    }
    .span_btn {
        color: #ff6b00;
        cursor: pointer;
    }
    .detail_container_header {
        background-color: #ffffff;
        position: relative;
        padding: 24px 24px 12px;

        .header_right {
            position: absolute;
            right: 24px;
            top: 17px;
            color: #fa6a0a;
            font-size: 15px;
            text-align: -webkit-center;
            .header_button {
                font-weight: 550;
                color: #33302d;
                width: 112px;
                height: 36px;
                background: #fff6f0;
                border-radius: 2px;
                border: 1px solid #ffd8bd;
                line-height: 34px;
                text-align: center;
                box-sizing: border-box;
                margin-bottom: 2px;
                & :hover {
                    color: #33302d;
                }
                .dot {
                    width: 10px;
                    height: 10px;
                    background: #ff6b00;
                    border-radius: 5px;
                    display: inline-block;
                }
            }
        }
    }
    .title {
        font-size: 16px;
        font-weight: 550;
        color: #33302d;
        line-height: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
    }
    .detail_container_product {
        margin-top: 16px;
        padding: 24px 24px 20px;
        background-color: #ffffff;
        .goods_item {
            display: flex;
            align-items: center;
            img {
                margin-right: 8px;
                width: 60px;
                height: 60px;
                min-width: 60px;
                min-height: 60px;
            }
            .goods_item_info {
                flex: 1;
                display: flex;
                flex-direction: column;
                height: 60px;
                justify-content: space-between;
                .goods_item_name {
                    font-size: 14px;
                    font-weight: 400;
                    color: #33302d;
                    line-height: 20px;
                    height: 40px;
                    min-width: 280px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    .sign {
                        height: 16px;
                        padding: 0 2px;
                        background: #ff6b00;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 15px;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        display: inline-block;
                    }
                }
                .goods_item_sku {
                    font-size: 14px;
                    font-weight: 400;
                    color: #969696;
                    line-height: 14px;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 280px;
                }
            }
        }
        .cell-sub {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
        .num {
            color: #fa6a0a;
        }
    }

    .detail_container_logs {
        margin-top: 16px;
        padding: 24px 24px 20px;
        background-color: #ffffff;
        .steps_list {
            padding: 25px 16px;
            font-size: 14px;
            border: 1px solid #eaeaea;
            background-color: #ffffff;
            .step-item {
                display: flex;
                .step-head {
                    width: 8px;
                    .step-icon {
                        margin-left: -2px;
                        width: 8px;
                        height: 8px;
                        background: #ffffff;
                        border: 2px solid #ff6b00;
                        border-radius: 50%;
                    }
                    .step-line {
                        margin: 0 auto;
                        width: 1px;
                        height: 100%;
                        // background: #ffc69e;
                        background-image: linear-gradient(#ffc69e 35%, rgba(255, 255, 255, 0) 0%);
                        background-position: left;
                        background-size: 1px 10px;
                        background-repeat: repeat-y;
                    }
                }
                .step_box {
                    flex: 1;
                    padding-left: 10px;
                    margin-bottom: 16px;
                    color: #999999;
                    .step-time {
                        margin-top: -4px;
                        padding-bottom: 10px;
                        color: #969696;
                    }
                    .step-status {
                        padding-bottom: 10px;
                        color: #33302d;
                    }
                    .step_content {
                        // padding-bottom: 16px;
                    }
                    .step_list_img {
                        display: flex;
                        align-items: center;
                        margin-top: 12px;
                        .step_img {
                            margin-right: 10px;
                            width: 80px;
                            height: 80px;
                        }
                    }
                }
            }
        }
    }
}
</style>
